<template>
    <view class="coupon" :class="{ disabled: state != 0 }">
        <view class="left">
            <view class="left-wave"></view>
            <view class="coupon-item-type">
                <view class="type-box" v-if="item.V_PrivilegeWay == 0">
                    <text class="price">{{ (item.CouponPrivilegeValue / 10).toFixed(1) }}</text>
                    <text class="unit">折</text>
                </view>
                <view class="type-box" v-if="item.V_PrivilegeWay != 0">
                    <text class="unit">￥</text>
                    <text class="price">{{ item.CouponPrivilegeValue }}</text>
                </view>
                <text class="mt-20">满 {{ item.V_OrderPrice }} 元可用</text>
            </view>
        </view>
        <view class="mid">
            <view class="top-radius"></view>
            <view class="mid-left"></view>
            <view class="mid-line"></view>
            <view class="mid-right"></view>
            <view class="btm-radius"></view>
        </view>
        <view class="right">
            <view class="css-main">
                <view class="coupon-item-info">
                    <text class="coupon-name">{{ item.V_Name }}</text>
                    <text class="coupon-desc">{{ item.V_ProductNames ? item.V_ProductNames : "全场通用" }}</text>
                    <text class="coupon-time"
                        >{{ item.V_UseStartTime.split(" ")[0] }} 至 {{ item.V_UseEndTime.split(" ")[0] }}</text
                    >
                </view>
                <button class="btn btn-activity">立即领取</button>
                <!-- <image   mode="aspectFill" :src="easyGetImgUrl(invalidUrl)"></image> -->
            </view>
            <view class="right-wave"></view>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        item: {
            type: Object,
            default: () => {},
        },
        state: {
            type: Number,
            default: 0,
        },
        showSelect: {
            type: Boolean,
            default: false,
        },
        selectId: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            invalidUrl: "https://hsy884.oss-cn-hangzhou.aliyuncs.com/upload/2023/04/19/20230419154701727.png",
        }
    },
    mounted() {},
    methods: {
        goDetail() {
            this.easyGoTo("/pages_me/packet/coupon/detail?data=" + encodeURIComponent(JSON.stringify(this.item)))
        },
        getTypeText() {
            let text = ""
            switch (this.item.V_PrivilegeWay) {
                case 0:
                    text = "折扣券"
                    break
                case 1:
                    text = "抵用券"
                    break
                case 2:
                    text = "随机抵用券"
                    break
                case 3:
                    text = "动态抵用券"
                    break
                default:
                    text = "优惠券"
                    break
            }
            return text
        },
        selectFn() {
            this.$emit("selectFn", String(this.item.ID))
        },
    },
}
</script>

<style lang="scss">
.coupon {
    box-sizing: border-box;
    display: flex;
    height: 200rpx;
    margin: 30rpx 12rpx;
    padding: 0 20rpx;
    overflow: hidden;
}
.coupon .left {
    position: relative;
    width: 180rpx;
    height: 100%;
    background-color: #fff5e4;
}
.left .left-wave {
    position: absolute;
    left: -7rpx;
    top: 0;
    width: 20rpx;
    height: 100%;
    background: radial-gradient(circle, #fff5e4 10rpx, #fff5e4, transparent 10rpx, transparent);
    background-repeat: repeat-y;
    background-size: 20rpx 25rpx;
    background-position: 0 0;
}
.coupon .right {
    position: relative;
    width: 480rpx;
    height: 100%;
    font-weight: 300;
    background-color: #fff5e4;
}

.right .right-wave {
    position: absolute;
    right: -7rpx;
    top: 0;
    width: 20rpx;
    height: 100%;
    background: radial-gradient(circle, #fff5e4 10rpx, #fff5e4, transparent 10rpx, transparent);
    background-repeat: repeat-y;
    background-size: 20rpx 25rpx;
    background-position: 100% 0;
}
.coupon .mid {
    position: relative;
    top: 0;
    width: 40rpx;
    height: 100%;
}
.top-radius {
    box-sizing: border-box;
    position: absolute;
    top: -20rpx;
    left: 0;
    width: 40rpx;
    height: 40rpx;
    border-bottom-left-radius: 20rpx;
    border-bottom-right-radius: 20rpx;
    border: 10rpx solid #fff5e4;
}
.btm-radius {
    box-sizing: border-box;
    position: absolute;
    bottom: -20rpx;
    left: 0;
    width: 40rpx;
    height: 40rpx;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    border: 10rpx solid #fff5e4;
}
.mid-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 10rpx;
    height: 100%;
    background-color: #fff5e4;
    z-index: 10;
}
.mid-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 10rpx;
    height: 100%;
    background-color: #fff5e4;
    z-index: 10;
}
.mid-line {
    position: absolute;
    left: 0;
    top: 15rpx;
    width: 40rpx;
    height: 170rpx;
    background-color: #fff;
    z-index: 8;
    background: radial-gradient(circle, #fff5e4 3rpx, #fff5e4);
    background-size: 40rpx 17rpx;
    background-repeat: repeat-y;
}

.disabled {
    opacity: 0.6;
}
.coupon-item-type {
    width: 200rpx;
    margin-right: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30rpx;
    text {
        color: #f60339;
    }
    .type-box {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        .unit {
            margin-bottom: 10rpx;
            font-size: 32rpx;
            font-weight: 700;
        }
        .price {
            font-size: 64rpx;
            font-weight: 700;
        }
    }
    .type-name {
        font-size: 40rpx;
    }
    .mt-20 {
        margin-top: 20rpx;
    }
}
.css-main {
    display: flex;
    .coupon-item-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 290rpx;
        margin: 30rpx 0 0 5rpx;
        .coupon-name {
            font-size: $font-size-32;
            font-weight: 700;
            margin-bottom: 12rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .coupon-desc {
            font-size: $font-size-24;
            margin-bottom: 12rpx;
        }
        .coupon-time {
            font-size: $font-size-22;
        }
    }
    .btn {
        border-radius: 24rpx;
        height: 48rpx;
        margin-top: 80rpx;
    }
    image {
        width: 96rpx;
        height: 96rpx;
        margin-top: 60rpx;
        margin-left: 40rpx;
    }
}
</style>
